<template>
    <!-- 修改资料 -->
    <div>
      <!-- 内容主题区域 -->
      <el-form
        label-width="75px"
        :model="form"
        label-position="right"
        ref="formRef"
        :rules="formRules"
      >
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="编号" prop="number">
              <el-input
                style="width: 70%"
                v-model="form.number"
                placeholder="请输入编号"
              ></el-input
              >&nbsp;
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="功能模块" prop="metaModuleId">
              <ts-select
                v-model="form.metaModuleId"
                fileName="MetaModuleReport"
                :template="tableProps"
                :label="form.metaModuleName"
              ></ts-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <el-form-item label="报表文件名">
            <sc-table-select v-model="form.reportObject" fileName = 'MetaModuleResourceReport' :props="tableProps2"  @change="reportChange"></sc-table-select>
          </el-form-item>
        </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="状态" prop="status">
              <el-select v-model="form.status">
                <el-option v-for="item in configData.statusList" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="button-position">
        <el-button @click="updateVisible">取 消</el-button>
        <el-button type="primary" @click="update(formRef)">确 定</el-button>
      </div>
    </div>
  </template>
    
    <script setup>
  import { reactive, ref, onMounted } from "vue";
  import { ElNotification } from "element-plus";
  import { Check, Close } from "@element-plus/icons-vue";
  import { useRouter } from "vue-router";
  import Api from "@/api/model/meta";
  import tsSelect from "@/components/scSelect/index.vue";
  import tsUpload from "@/components/tsUpload/file.vue";
  const emit = defineEmits(["updatetable"]);
  const props = defineProps({
    paramsData: {
      type: Object,
      defalut: {},
    },
  });
  const router = useRouter();
  const form = ref({});
  const configData = ref({});
  const formRef = ref();
  const tableProps = {
    value: "id",
    label: "name",
  };
  const tableProps2 = {
  value: "label",
  label: "label",
};
  onMounted(() => {
    getInit();
  });
  
  const getInit = async () => {
    let formRes = await Api.blockDesigner.detail.post(props.paramsData);
    if (formRes.code == 200) {
      form.value = formRes.data;
      form.value.reportObject= {label:form.value.reportFileName}
      configData.value = formRes.configData;
    }
  };
  
  const restAddFormData = () => {
    formRef.value.resetFields();
  };
  const reportChange = (val) =>{
  form.value.reportFileName = val.label
}
  const updateVisible = (val) => {
    emit("updatetable");
  };
  // 上传
  const update = async (formRef) => {
    await formRef.validate((valid, fields) => {
      if (valid) {
        updateData();
      }
    });
  };
  
  const updateData = async () => {
    let params = {
      bean: form.value,
    };
    let res = await Api.blockDesigner.update.post(params);
    if (res.code == 200) {
      ElNotification.success({
        title: "",
        message: "添加成功！",
        duration: 2000,
      });
      emit("updatetable", true);
    }
  };
  </script>
    
    <style lang="less" scoped></style>
    